<template>
	<view class="container">
		<view class="head">
			<navigator hover-class="none" url="/pages/search/search" class="search">
				<view class="left-icon"><uni-icons class="icon" color="#a1a0a0" type="left" size="20"></uni-icons></view>
				<view class="icon-input">
					<uni-icons class="icon" color="#a1a0a0" type="search" size="20"></uni-icons>
					<input placeholder="输入关键字搜索产品/供应商" placeholder-class="input" />
				</view>
			</navigator>
			<view class="type-btn">
				<view>全部</view>
				<view class="active">供应商</view>
				<view>新品</view>
			</view>
			<view class="condition">
				<view class="c">
					<view class="title">
						综合推荐
						<view class="triangle-down"></view>
					</view>
				</view>
				<view class="c active">
					<view class="title">
						价格
						<view class="triangle-down"></view>
					</view>
				</view>
				<view class="c">
					<view class="title" @click="handleConditionOpen(1)">
						品牌范围
						<view class="triangle-down"></view>
					</view>
				</view>
				<view class="c sieve" @click="$refs.sieve.open()">
					筛选
					<image class="img" src="/static/image/common/add_menu.png" mode="widthFix" />
				</view>
				<view class="module" v-if="isMoule">
					<view class="leibie">
						<view class="data">
							<view class="item">采购线索</view>
							<view class="item">代加工</view>
							<view class="item">二手设备</view>
						</view>
						<view class="btns">
							<view class="" @click="isMoule = false">重置</view>
							<view class="" @click="isMoule = false">确定</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-y class="scroll-view">
			<view class="shop-list-data">
				<view class="item" v-for="item in 3" :key="item">
					<view class="head">
						<image class="avatar" src="https://img1.baidu.com/it/u=1268603822,1552453616&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode="widthFix" />
						<view class="info">
							<view class="title">
								诺展商城机械有限公司
								<view class="btn">进店</view>
							</view>
							<view class="attr">
								<view class="tag">生产厂家</view>
								主营
								<view class="interval">143</view>
								对接用户
								<view class="interval">34</view>
								活跃
								<view class="interval">344</view>
							</view>
							<view class="grey">主营：机械制造|机器人|激光雕刻</view>
							<view class="main">宁波机床模展</view>
						</view>
					</view>
					<view class="list">
						<navigator class="url">
							<image class="img" src="https://img0.baidu.com/it/u=2673215897,2698637547&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode="widthFix" />
						</navigator>
						<navigator class="url">
							<image class="img" src="https://img0.baidu.com/it/u=2673215897,2698637547&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode="widthFix" />
						</navigator>
						<navigator class="url">
							<image class="img" src="https://img0.baidu.com/it/u=2673215897,2698637547&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode="widthFix" />
						</navigator>
						<navigator class="url">
							<image class="img" src="https://img0.baidu.com/it/u=2673215897,2698637547&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode="widthFix" />
						</navigator>
					</view>
				</view>
			</view>
		</scroll-view>
		<uni-popup ref="sieve" type="bottom">
			<view class="popup-module">
				<view class="title">
					<view></view>
					<view class="name">全部筛选</view>
					<view class="close" @click="$refs.sieve.close()"><uni-icons class="icon" color="#4c4c4c" type="closeempty" size="20"></uni-icons></view>
				</view>
				<view class="content">
					<view class="data">
						<view class="t">品牌范围</view>
						<view class="list">
							<view class="item">国产品牌</view>
							<view class="item active">台湾品牌</view>
							<view class="item">日韩品牌</view>
							<view class="item">欧美品牌</view>
							<view class="item">泰国品牌</view>
						</view>
					</view>
					<view class="data">
						<view class="t">区间</view>
						<view class="nums">
							<input placeholder-class="input" placeholder="自定义最低价" />
							<view>-</view>
							<input placeholder-class="input" placeholder="自定义最高价" />
						</view>
					</view>
					<view class="data">
						<view class="t">分类</view>
						<view class="list">
							<view class="item">立式加工中心</view>
							<view class="item">多车机床</view>
							<view class="item active">日韩品牌</view>
							<view class="item">欧美品牌</view>
							<view class="item">泰国品牌</view>
						</view>
					</view>
				</view>
				<view class="btns">
					<view>重置</view>
					<view>确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isMoule: false
		};
	},
	mounted() {},
	methods: {
		handleConditionOpen(type) {
			this.isMoule = true;
			this.type = type;
		}
	}
};
</script>
<style lang="scss">
 @import '../list.scss';
</style>
